<template>
  <div>
    <n-bar class="nbar"></n-bar>
    <div class="dao">
      <van-icon class="ding" name="location-o" />
      <a href="javascript:;">
        <img :src="image" alt="" />
      </a>
      <van-search class="inp" v-model="value" placeholder="请输入搜索关键词" />
      <van-icon class="shang" name="shop-o" />
    </div>
    <van-tabs v-model="active">
      <van-tab title="推荐"></van-tab>
      <van-tab 
      v-for='item in tuijian'
      :key="item.id"
      to='/cate'
      :title="item.catename"></van-tab>

      <van-tab title="分类"> </van-tab>
    </van-tabs>
    <!-- 轮播图 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="image in images" :key="image.id">
        <img class="imgURL" :src="image.img" />
      </van-swipe-item>
    </van-swipe>

     <!-- 宫格展示 -->
    <van-grid :border="false" :gutter="2" :column-num="5">
      <van-grid-item v-for="item in gridlist" :key="item.id">
        <van-image :src="item.img" />
        <p class="grid-title">{{ item.title }}</p>
      </van-grid-item>
    </van-grid>

    <div class="article_box1">
        <ul>
          <li v-for="item in miao" :key="item.id">
            <p class="arti">
              <a href="#">{{ item.title }}</a
              ><i>{{ item.title1 }}</i
              ><span class="iconfont icon-yousanjiao arti1"></span>
            </p>
            <p class="arti2">{{ item.title2 }}</p>
            <div class="arti3">
              <span>05</span>
              <i>:</i>
              <span>20</span>
              <i>:</i>
              <span>48</span>
            </div>
            <img :src="item.imgs" alt="" />
          </li>
          <li v-for="item in miao1" :key="item.id">
            <p class="arti4">
              <a href="#">{{ item.title }}</a>
            </p>
            <p>{{ item.title2 }}</p>
            <p>
              <i>{{ item.title3 }}</i>
              <span class="iconfont icon-yousanjiao arti5"></span>
            </p>
            <img :src="item.imgs1" alt="" />
          </li>
          <li v-for="item in miao2" :key="item.id">
            <p class="arti6">
              <a href="#">{{ item.title }}</a>
            </p>
            <p>{{ item.title2 }}</p>
            <p>
              <i>{{ item.title3 }}</i>
              <span class="iconfont icon-yousanjiao arti7"></span>
            </p>
            <img :src="item.imgs2" alt="" />
          </li>
        </ul>
      </div>
        <div class="shuang">
        <p>
          <a href="" v-for="item in p1" :key="item.id">{{ item.title }}</a>
        </p>
        <div class="shuang_box">
          <img
            v-for="item in tupian"
            :key="item.id"
            :src="item.imgage"
            alt=""
          />
        </div>
      </div>

        <!-- 商品列表切换 -->
    <van-tabs type="card" class="cardd">
      <van-tab title="热门推荐">
        <!-- 商品列表 -->
        <van-card
          @click="goDetail(item.id)"
          v-for="item in hotslist"
          :key="item.id"
          num="1"
          :price="item.price "
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="上新推荐">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in newslist"
          :key="item.id"
          num="1"
          :price="item.price"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price"
        />
      </van-tab>
      <van-tab title="所有商品">
        <van-card
          @click="goDetail(item.id)"
          v-for="item in goodslist"
          :key="item.id"
          num="1"
          :price="item.price"
          :title="item.goodsname"
          :thumb="item.img"
          :origin-price="item.market_price "
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入封装好的接口
import {getBanner,getHomeGoods,getCates} from "../request/app";
export default {
  data() {
    return {
      image: require("../assets/img/logo.png"),
      value: "",
      active: 0,
      images: [],
        miao: [
        {
          id: 1,
          title: "限时秒杀",
          title1: "查看更多",
          title2: "每天0点场，好货秒不停",
          imgs: require("../assets/img/图1.png"),
        },
      ],
      miao1: [
        {
          title: "品牌上新",
          title2: "9点整，抢大牌",
          title3: "疯抢红包",
          imgs1: require("../assets/img/图1.png"),
        },
      ],
      miao2: [
        {
          title: "日常好物",
          title2: "愿君多采撷  ",
          title3: "塞满奖券",
          imgs2: require("../assets/img/图3.png"),
        },
      ],
      p1: [
        {
          id: 1,
          title: "双11尖货预购",
        },
        {
          id: 2,
          title: "双11尖货预购",
        },
      ],
      tupian: [
        {
          id: 1,
          imgage: require("../assets/img/底1.png"),
        },
        {
          id: 2,
          imgage: require("../assets/img/底2.png"),
        },
        {
          id: 3,
          imgage: require("../assets/img/底3.png"),
        },
        {
          id: 4,
          imgage: require("../assets/img/底4.png"),
        },
      ],
        gridlist: [
        {
          id: 1,
          img:require('../assets/img/限时抢购.png'),
          title: "限时秒杀",
        },
        {
          id: 2,
          img:require('../assets/img/畅销商品.png'),
          title: "畅销商品",
        },
        {
          id: 3,
          img:require('../assets/img/品质大牌.png'),
          title: "品质大牌",
        },
        {
          id: 4,
          img: require('../assets/img/小u自营.png'),
          title: "小U自营",
        },
        {
          id: 5,
          img:require('../assets/img/积分兑换.png'),
          title: "积分商城",
        },
      ],
      tuijian:[],
      goodslist: [], //所有商品列表
      newslist: [], //最新列表
      hotslist: [], //热门推荐
    };
  },
  mounted() {
    getBanner().then(res=> {
      console.log(res,"轮播图接口");
      this.images=res.list
    });
    getCates().then(res=>{
      console.log(res,"首页分类导航");
      if(res.code==200){
        this.tuijian=res.list
      }
    })

      //页面一加载调用封装轮播图的方法
    // this.getBannerList();
    //页面一加载调用 获取商品信息首页
    getHomeGoods().then((res) => {
      console.log(res,"商品信息");
      if (res.code == 200) {
        this.hotslist = res.list[0].content;
        this.newslist = res.list[1].content;
        this.goodslist = res.list[2].content;
      }
    });
  },
   methods: {
    //跳转到商品详情页面
    goDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id,
        },
      });
    },
    tui(id){
       this.$router.push({
         path:'/cate',
         query:{
           id
         }
       }
         
       )
    } ,
    
   

  },
};
</script>

<style lang='less' scoped>
.cardd{
  margin-top: 0.1rem;
}
.grid-title {
  font-size: 14px;
}
.imgURL {
  width: 100%;
  height: 2.2rem;
}
.dao {
  width: 100%;
  height: 0.5rem;
  background-color: #ff6040;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border: none;
  .ding {
    font-size: 0.3rem;
    color: #eee;
  }
  .shang {
    font-size: 0.2rem;
    color: #eee;
  }
  .inp {
    padding: 0;
  }

  a {
    img {
            width: 100%;
            height: 0.3rem;
    }
  }
}
.article_box1 {
  width: 3.55rem;
  height: 1.75rem;
  background-color: #f2f2f2;
  margin: 0.1rem auto;
  position: relative;
  z-index: 1;
}
.article_box1 ul li:first-child img {
  width: 1.75rem;
  height: 1.75rem;
  position: absolute;
  top: 0rem;
  left: 0rem;
}
.article_box1 ul li img {
  width: 1.75rem;
  height: 0.85rem;
  z-index: -1;
}
.article_box1 ul li:nth-child(2) img {
  position: absolute;
  right: 0rem;
  top: 0rem;
}
.article_box1 ul li:nth-child(3) img {
  position: absolute;
  right: 0rem;
  bottom: 0rem;
}
.article_box1 a {
  font-size: 0.16rem;
  color: #85a642;
}
.article_box1 .arti {
  font-size: 0.1rem;
  color: #333333;
  /* position: absolute; */
  /* left: 0.2rem;
    top: 0.1rem; */
}
.article_box1 .arti a {
  position: absolute;
  left: 0.1rem;
  top: 0.1rem;
}
.article_box1 .arti i {
  position: absolute;
  top: 0.15rem;
  left: 1.12rem;
}
.icon-yousanjiao {
  font-size: 0.08rem;
  /* border: 1px solid #333333; */
  color: #333;
  padding: 0.15rem 0.15rem;
  box-sizing: border-box;
}
.article_box1 .arti .arti1 {
  position: absolute;
  top: 0.03rem;
  left: 1.37rem;
}

.arti2 {
  font-size: 0.1rem;
  color: #b1cc7a;
  position: absolute;
  top: 0.36rem;
  left: 0.1rem;
}
.arti3 {
  height: 0.18rem;
  /* background-color: violet; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.05rem;
  position: absolute;
  top: 0.55rem;
  left: 0.1rem;
}
.arti3:nth-child(1) span,
.arti3:nth-child(2) span,
.arti3:nth-child(3) span {
  width: 0.16rem;
  height: 0.18rem;
  background-image: linear-gradient(180deg, #85a642 0%, #b1cc7a 100%);
  border-radius: 0.01rem;
  font-size: 0.14rem;
  color: white;
  line-height: 0.18rem;
}
.arti3 i {
  color: #85a642;
  font-size: 0.02rem;
  margin: 0.05rem;
}
.arti4 > a {
  position: absolute;
  right: 1.01rem;
  top: 0.1rem;
}
.article_box1 ul li:nth-child(2) p:nth-child(2) {
  font-size: 0.1rem;
  color: #ff9580;
  position: absolute;
  right: 0.99rem;
  top: 0.36rem;
}
.article_box1 ul li:nth-child(2) p:nth-child(3) {
  width: 0.6rem;
  height: 0.2rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
  border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
  margin-top: 0.07rem;
  font-size: 0.1rem;
  color: #ffffff;
  position: absolute;
  line-height: 0.1rem;
  right: 1.05rem;
  top: 0.5rem;
}
.article_box1 ul li:nth-child(2) p:nth-child(3) > i {
  margin-left: -0.1rem;
}
.arti5 {
  font-size: 0.1rem;
  color: #ffffff;
  position: absolute;
  top: -0.09rem;
  right: -0.12rem;
}
.arti6 > a {
  position: absolute;
  right: 1.01rem;
  top: 1rem;
}
.article_box1 ul li:nth-child(3) p:nth-child(2) {
  font-size: 0.1rem;
  color: #ff9580;
  position: absolute;
  right: 1.15rem;
  top: 1.26rem;
}
.article_box1 ul li:nth-child(3) p:nth-child(3) {
  width: 0.6rem;
  height: 0.2rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
  border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
  margin-top: 0.07rem;
  font-size: 0.1rem;
  color: #ffffff;
  position: absolute;
  line-height: 0.1rem;
  right: 1.05rem;
  top: 1.4rem;
}
.arti7 {
  font-size: 0.1rem;
  color: #ffffff;
  position: absolute;
  top: -0.09rem;
  right: -0.12rem;
}
.article_box1 ul li:nth-child(3) p:nth-child(3) > i {
  margin-left: -0.1rem;
}
.shuang {
  width: 3.55rem;
  /* height: 1.5rem; */
  /* background-color: violet; */
  margin: 0px 0.1rem;
  position: relative;
  z-index: -1;
}
.shuang > p {
  height: 0.42rem;
  /* background-color: yellow; */
  font-size: 0.16rem;
  line-height: 0.42rem;
  display: flex;
  justify-content: space-around;
}
.shuang p a:nth-child(1) {
  font-size: 0.16rem;
  color: #ff6040;
}
.shuang p a:nth-child(2) {
  font-size: 0.14rem;
  color: #999999;
}
.shuang .shuang_box img {
  width: 0.8rem;
  height: 0.8276rem;
}
.shuang .shuang_box {
  width: 3.55rem;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.shuang .shuang_box img:nth-child(5) {
  position: absolute;
  top: 1.3rem;
  left: 0.07rem;
}
.shouji {
  width: 3.55rem;
  margin: 0px 0.1rem;
  /* background-color: lightpink; */
}

.shouji ul li {
  width: 1.7rem;
  /* height: 0.53rem; */

  text-align: center;
  line-height: 0.53rem;
  margin: auto;
}
.active {
  padding: 0.1rem;
  border-radius: 0.04rem 0.02rem 0.02rem 0.04rem;
  color: white !important;
  background-color: orange;
}
.shouji ul li a {
  color: orange;
  font-size: 0.14rem;

  border-radius: 0.04rem 0.02rem 0.02rem 0.04rem;
}

.shouji1 {
  /* width: 3.55rem; */
  margin: 0px 0.1rem;
  box-shadow: 0.1rem 1rem 0.9rem 0.9rem #eee;
  background-color: white;
  display: flex;
  margin-bottom: 0.1rem;
}

.shouji1 img {
  width: 1rem;
  height: 1.2rem;
}
.shouji2 {
  margin-left: 0.2rem;
  margin-top: 0.2rem;
}
.shouji2 p:nth-child(1) {
  color: black;
  font-size: 0.16rem;
}

.shouji2 p:nth-child(2) {
  color: red;
  font-size: 0.16rem;
}
.shouji2 p:nth-child(3) {
  color: grey;
  font-size: 0.16rem;
}
.shouji2 p:nth-child(4) {
  width: 0.6rem;
  background-color: orange;
  border-radius: 0.08rem;
}
.shouji2 p:nth-child(4) a {
  display: block;
  /* height: 0.3rem; */
  color: white;
  text-align: center;
  /* line-height: 0.3rem; */
  padding: 0.03rem;
}
.place {
  position: relative;
  left: 0.4rem;
  font-size: 0.17rem;
  color: #999;
}
@media screen and (max-width: 281px) {
  .article_box1 .arti i {
    position: absolute;
    top: 0.11rem;
    left: 0.87rem;
  }
  .article_box1 .arti .arti1 {
    position: absolute;
    top: -0.03rem;
    left: 1.37rem;
  }
  .article_box1 ul li:nth-child(2) p:nth-child(2) {
    font-size: 0.1rem;
    color: #ff9580;
    position: absolute;
    right: 0.6rem;
    top: 0.28rem;
  }

  .article_box1 ul li:nth-child(3) p:nth-child(2) {
    font-size: 0.1rem;
    color: #ff9580;
    position: absolute;
    right: 0.85rem;
    top: 1.17rem;
  }
  .article_box1 ul li:nth-child(3) p:nth-child(3) {
    width: 0.8rem;
    height: 0.2rem;
    background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
    border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
    margin-top: 0.07rem;
    font-size: 0.1rem;
    color: #ffffff;
    position: absolute;
    line-height: 0.1rem;
    right: 0.85rem;
    top: 1.4rem;
  }
  .icon-lujing134 {
    font-size: 0.2rem;
    color: #999;
    margin-left: 0.07rem;
  }
  #coe3 p:nth-child(2) span {
    margin-left: 0.09rem;
  }
  .article_box1 ul li:nth-child(2) p:nth-child(3) {
    width: 0.8rem;
    height: 0.2rem;
    background-image: linear-gradient(180deg, #ff6040 0%, #ff9f80 100%);
    border-radius: 0.02rem 0.12rem 0.12rem 0.02rem;
    margin-top: 0.07rem;
    font-size: 0.1rem;
    color: #ffffff;
    position: absolute;
    line-height: 0.1rem;
    right: 0.86rem;
    top: 0.5rem;
  }
  .arti2 {
    font-size: 0.1rem;
    color: #b1cc7a;
    position: absolute;
    top: 0.3rem;
    left: 0.1rem;
  }
}
// max最大 min最小
@media screen and (max-width: 360px) and (min-width: 281px) {
 .inp{
   width: 1.6rem;
 }
 .article_box1 ul li:nth-child(2) p:nth-child(3) > i[data-v-7eb2bc79] {
    margin-left: 0rem;
    margin-top: 0.1rem;
}
.article_box1 ul li:nth-child(2) p[data-v-7eb2bc79]:nth-child(3) {
  position: absolute;
    left: 1.9rem;
    top: 0.5rem;
    line-height: inherit; 
}
.article_box1 ul li:nth-child(3) p:nth-child(3) > i[data-v-7eb2bc79] {
    /* margin-left: -0.1rem; */
    position: absolute;
    top: 0.05rem;
    left: 0.15rem;
}
.grid-title[data-v-7eb2bc79] {
    font-size: 12px;
}
}
@media screen and (max-width: 414px) and (min-width: 411px) {
 
}
@media screen and (max-width: 375px) and (min-width: 360px) {
 
}
</style>
